<template>
	<div id="messageEditor">
		<el-form :model="remark" ref="messageRef" class="" label-width="50px" :rules="messageRules">
			<template v-if="!userInfo">
				<el-form-item label="头像">
					<uploadImage v-model="remark.userImage"></uploadImage>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input clearable placeholder="请输入昵称" v-model="remark.userName">
					</el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input clearable placeholder="请输入邮箱" v-model="remark.email">
					</el-input>
				</el-form-item>
			</template>
			<el-form-item label="内容">
				<comment-message-editor v-model="remark.content" :inline="true" :submitButtonShow="false">
				</comment-message-editor>
			</el-form-item>
			<el-form-item>
				<el-button class="submit" type="primary" @click="submitForm('messageRef')">{{buttonText}}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import uploadImage from '@/components/upload/uploadImage.vue'
	import commentMessageEditor from 'comment-message-editor'
	export default {
		name: "messageEditor",
		data() {
			var emailPass = (rule, value, callback) => {
				if (value == "") {
					callback();
				} else {
					let a = /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/;
					if (a.test(value)) {
						callback();
					} else {
						callback(new Error('邮箱格式不正确'));
					}
				}
			}
			return {
				remark: {
					userImage: "",
					userName: "",
					email: "",
					content: ""
				},
				messageRules: {
					email: [{
						validator: emailPass,
						trigger: 'blur'
					}]
				}
			}
		},
		props: {
			buttonText: {
				type: String,
				default: "提交"
			},
			successCallback: {
				type: Function
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		components: {
			uploadImage,
			commentMessageEditor
		},
		methods: {
			submitForm(formName) {
				console.log(this.remark)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.userInfo){
							this.remark.userImage = this.userInfo.headphoto;
							this.remark.userName = this.userInfo.username;
							this.remark.email = this.userInfo.email;
						}
						var data = this.remark;
						data.userImage = data.userImage || "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg";
						data.userName = data.userName || "匿名用户";
						data.userId = this.userInfo.id || 1;
						this.successCallback(data);
					} else {
						return false;
					}
				});
			}
		},
		mounted() {},
		created() {},
		beforeUpdate() {}
	}
</script>

<style lang="less">
	#messageEditor {
		.submit {float: right;}

		.content {
			font-size: 0.875rem;
			padding: 0;
			padding-left: 0.9375rem;
			padding-right: 2rem;
			height: 2.5rem !important;
			overflow-y: auto;
			word-break: break-all;
			width: 100%;
			max-width: 100%;

			&:before {
				position: unset !important;
			}
		}

		.input-wrapper.inline .input-box {
			margin: 0;
		}

		.submit-button {
			margin-left: 2%;
			font-size: 0.75rem;
			border-radius: 0.1875rem;
			height: 2rem !important;
			line-height: 1.3rem !important;
			letter-spacing: 4px;
		}

		.emoji-wrapper {
			position: relative;
			top: 5px;
			z-index: 0;
		}

		.input-wrapper .input-append.hasbg {
			border-radius: 0 4px 4px 0;
		}

		.comment-editor {
			width: 100%;
		}
	}
</style>
